import React from "react";
import { Box, Link, Text } from "@chakra-ui/react";
import { Form, Input, Button, Checkbox, message } from "antd";
import {
  UserOutlined,
  LockOutlined,
  WechatFilled,
  WeiboCircleFilled,
  QqCircleFilled,
  PhoneOutlined,
  MailOutlined,
} from "@ant-design/icons";
import styles from "./index.module.css";
import classnames from "classnames";
import { withRouter } from "react-router-dom";
import { registerApi } from "../../services/index";

function Register(props) {
  const goToLogin = () => {
    const { history } = props;
    history.push("/login");
  };
  const onFinish = async (values) => {
    console.log("Received values of form: ", values);
    try {
      const res = await registerApi({
        user: {
          ...values,
        },
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success("注册成功");
        setTimeout(() => {
          goToLogin();
        }, 1000);
      } else {
        message.error("注册失败");
      }
    } catch (err) {
      console.log(err);
      message.error("注册失败");
    }
  };

  return (
    <Box w="100%" h="100%" bg="#f1f1f1">
      <Box
        position="fixed"
        w="400px"
        h="565px"
        boxShadow="0 0 8px rgba(0,0,0,.1)"
        left="0"
        right="0"
        top="0"
        bottom="0"
        margin="auto"
        boxSizing="border-box"
        padding="40px 40px 30px"
        bg="#fff"
      >
        <Box as="h4" margin="0 auto 50px" fontWeight="400" color="#969696">
          <Box
            fontSize="18px"
            display="flex"
            justifyContent="center"
            alignItems="center"
          >
            <Link color="#969696" padding="10px" onClick={goToLogin}>
              登录
            </Link>
            <Text as="b" padding="10px">
              ·
            </Text>
            <Link
              fontWeight="700"
              color="lagou.100"
              borderBottom="2px solid #fff"
              borderBottomColor="lagou.100"
              textDecoration="none"
              padding="10px"
            >
              注册
            </Link>
          </Box>
        </Box>
        <Box w="300px" h="386px">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              className={classnames({
                [styles.lagou_form_item]: true,
              })}
              name="username"
              rules={[
                {
                  required: true,
                  message: "用户名不能为空",
                },
                // {
                //   // type: "regexp",
                //   message: "请输入正确的手机号",
                //   pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
                // },
              ]}
            >
              <Input
                className={classnames({
                  [styles.lagou_input]: true,
                  [styles.lagou_input_username]: true,
                })}
                prefix={<PhoneOutlined />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              className={classnames({
                [styles.lagou_form_item]: true,
              })}
              name="email"
              rules={[
                {
                  required: true,
                  message: "邮箱不能为空",
                },
                {
                  type: "email",
                  message: "请输入正确的邮箱",
                },
              ]}
            >
              <Input
                className={classnames({
                  [styles.lagou_input]: true,
                  [styles.lagou_input_username]: true,
                })}
                prefix={<MailOutlined />}
                placeholder="邮箱"
              />
            </Form.Item>
            <Form.Item
              style={{ marginBottom: "10px" }}
              name="password"
              rules={[
                { required: true, message: "请输入密码!" },
                {
                  pattern: /^(\w){6,20}$/,
                  message: "只能输入6-20个字母、数字、下划线!",
                },
              ]}
            >
              <Input
                className={classnames({
                  [styles.lagou_input]: true,
                })}
                prefix={<LockOutlined />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button
                htmlType="submit"
                type="primary"
                style={{
                  background: "#42C02E",
                  width: "300px",
                  height: "44px",
                  borderRadius: "22px",
                  fontSize: "20px",
                  border: "none",
                  outline: "none",
                }}
              >
                注册
              </Button>
            </Form.Item>
          </Form>
          <Box
            as="p"
            className={classnames({
              [styles.lagou_sign]: true,
            })}
          >
            <span>点击 “注册” 即表示您同意并愿意遵守简书</span>
            <br />
            <Link target="_blank" href="http://www.jianshu.com/p/c44d171298ce">
              用户协议
            </Link>
            和
            <Link target="_blank" href="http://www.jianshu.com/p/2ov8x3">
              隐私政策
            </Link>
          </Box>
          <Box marginTop="30px">
            <Box
              position="relative"
              color="#b5b5b5"
              margin="0 0 10px"
              fontSize="12px"
              textAlign="center"
              className={classnames({
                [styles.lagou_line]: true,
              })}
            >
              社交账号登录
            </Box>
          </Box>
          <Box
            marginTop="10px"
            display="flex"
            justifyContent="space-evenly"
            alignItems="center"
          >
            <WeiboCircleFilled
              style={{
                fontSize: "30px",
                color: "#E05244",
                cursor: "pointer",
              }}
            />
            <WechatFilled
              style={{
                fontSize: "30px",
                color: "#00BB29",
                cursor: "pointer",
              }}
            />
            <QqCircleFilled
              style={{
                fontSize: "30px",
                color: "#498AD5",
                cursor: "pointer",
              }}
            />
          </Box>
        </Box>
      </Box>
    </Box>
  );
}
export default withRouter(Register);
